<template>
	<view class="container">
		<view class="nav-bar">
			<text class="nav-title">待审批</text>
		</view>
		<view class="task-list">
			<!-- 条件渲染，如果没有待审批任务，则显示提示信息 -->
			<view v-if="sortedTasks.length === 0" class="no-tasks">
				<text>当前暂无待审批的工单</text>
			</view>
			<!-- 循环渲染待审批任务列表 -->
			<view v-else>
				<view v-for="task in sortedTasks" :key="task.id" class="task-item">
					<view class="task-info">
						<view class="info-row">
							<text class="label">工单ID：</text>
							<text>{{ task.id }}</text>
						</view>
						<view class="info-row">
							<text class="label">工单类型：</text>
							<text>{{ task.title }}</text>
						</view>
						<view class="info-row">
							<text class="label">申请人：</text>
							<text>{{ task.userName }}</text>
						</view>
						<view class="info-row">
							<text class="label">提交时间：</text>
							<text>{{ task.createTime }}</text>
						</view>
						<view class="info-row">
							<text class="label">申请人职位：</text>
							<text>{{task.name}}</text>
						</view>
						<view class="info-row">
							<text class="label">紧急程度：</text>
							<text
								:class="['urgency-tag', 'urgency-' + task.urgency]">{{ formatUrgency(task.urgency) }}</text>
						</view>
						<view class="info-row">
							<text class="label">超时预警：</text>
							<text
								:class="['timeout-tag', task.timeOutApproval ? 'timeout-yes' : 'timeout-no']">{{ formatTimeOut(task.timeOutApproval) }}</text>
						</view>
					</view>
					<view class="task-actions">
						<button @click="showApproveModal(task)" class="blue-button">通过</button>
						<button @click="showRejectModal(task)" class="blue-button">驳回</button>
					</view>
				</view>
				<view v-if="approveModalVisible" class="approve-modal">
					<view class="modal-content">
						<view class="modal-header">
							<text class="modal-title">审批通过</text>
							<view class="modal-close" @click="closeApproveModal">关闭</view>
						</view>
						<view class="modal-body">
							<view class="form-item">
								<text class="form-label">审批意见：</text>
								<input v-model="approveTaskData.comment" class="form-input" placeholder="请输入审批意见" />
							</view>
							<view class="form-item">
								<text class="form-label">维修难度：</text>
								<radio-group v-model="approveTaskData.difficulty">
									<label class="radio-label">
										<radio value="1" class="radio" />一般
									</label>
									<label class="radio-label">
										<radio value="2" class="radio" />复杂
									</label>
									<label class="radio-label">
										<radio value="3" class="radio" />重大
									</label>
								</radio-group>
							</view>
						</view>
						<view class="modal-footer">
							<button @click="submitApproveTask" class="blue-button">提交</button>
							<button @click="closeApproveModal" class="blue-button">取消</button>
						</view>
					</view>
				</view>
				<view v-if="rejectModalVisible" class="reject-modal">
					<view class="modal-content">
						<view class="modal-header">
							<text class="modal-title">驳回审批</text>
							<view class="modal-close" @click="closeRejectModal">关闭</view>
						</view>
						<view class="modal-body">
							<view class="form-item">
								<text class="form-label">驳回原因：</text>
								<input v-model="rejectTaskData.comment" class="form-input" placeholder="请输入驳回原因" />
							</view>
							<view class="form-item">
								<text class="form-label">维修难度：</text>
								<radio-group v-model="rejectTaskData.difficulty">
									<label class="radio-label">
										<radio value="1" class="radio" />一般
									</label>
									<label class="radio-label">
										<radio value="2" class="radio" />复杂
									</label>
									<label class="radio-label">
										<radio value="3" class="radio" />重大
									</label>
								</radio-group>
							</view>
						</view>
						<view class="modal-footer">
							<button @click="submitRejectTask" class="blue-button">提交</button>
							<button @click="closeRejectModal" class="blue-button">取消</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tasks: [], // 待审批工单列表
				sortedTasks: [], // 排序后的工单列表
				approveTaskData: {
					task: null,
					comment: '',
					difficulty: 1
				},
				rejectTaskData: {
					task: null,
					comment: '',
					difficulty: 1
				},
				approveModalVisible: false, // 审批通过弹出层是否显示
				rejectModalVisible: false // 驳回弹出层是否显示
			};
		},
		mounted() {
			this.loadTasks();
		},
		methods: {
			async loadTasks() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/approve/toApproveList",
						method: 'get',
						header: {
							'Authorization': 'Bearer ' + token
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.tasks = res.data.data;
						console.log(this.tasks);
						this.sortTasks();
					} else {
						uni.showToast({
							title: "加载待审批任务失败",
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			},
			sortTasks() {
				// 按紧急程度（高→中→低）和提交时间（近→远）排序
				this.sortedTasks = this.tasks.sort((a, b) => {
					if (a.urgency !== b.urgency) {
						return b.urgency - a.urgency; // 紧急程度高优先
					}
					return new Date(b.createTime) - new Date(a.createTime); // 提交时间近优先
				});
			},
			formatUrgency(urgency) {
				switch (urgency) {
					case 1:
						return '低';
					case 2:
						return '中';
					case 3:
						return '高';
					default:
						return '未知';
				}
			},
			formatTimeOut(timeOut) {
				return timeOut ? '是' : '否';
			},
			showApproveModal(task) {
				this.approveTaskData.task = task;
				this.approveModalVisible = true;
			},
			closeApproveModal() {
				this.approveModalVisible = false;
			},
			submitApproveTask() {
				if (!this.approveTaskData.comment) {
					uni.showToast({
						title: '审批意见不能为空',
						icon: 'none'
					});
					return;
				}
				try {
					const token = uni.getStorageSync('token');
					const res = uni.request({
						url: "http://localhost:8082/api/approve/pass",
						method: 'PUT',
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						data: {
							orderId: this.approveTaskData.task.id,
							approvalResult: true,
							comment: this.approveTaskData.comment,
							difficulty: this.approveTaskData.difficulty
						},
						success: (res) => {
							if (res.statusCode === 200 && res.data.code === 1) {
								uni.showToast({
									title: "审批通过成功",
									icon: 'success'
								});
								this.closeApproveModal();
								this.loadTasks(); // 刷新任务列表
							} else {
								uni.showToast({
									title: "审批通过失败",
									icon: 'none'
								});
								this.closeApproveModal();
							}
						},
						fail: (err) => {
							uni.showToast({
								title: "请求接口失败" + err.message,
								icon: 'none'
							});
						}
					});
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			},
			showRejectModal(task) {
				this.rejectTaskData.task = task;
				this.rejectModalVisible = true;
			},
			closeRejectModal() {
				this.rejectModalVisible = false;
			},
			submitRejectTask() {
				try {
					const token = uni.getStorageSync('token');
					const res = uni.request({
						url: "http://localhost:8082/api/approve/reject",
						method: 'PUT',
						header: {
							'Authorization': 'Bearer ' + token,
							'Content-Type': 'application/json'
						},
						data: {
							orderId: this.rejectTaskData.task.id,
							approvalResult: false,
							comment: this.rejectTaskData.comment,
							difficulty: this.rejectTaskData.difficulty
						},
						success: (res) => {
							if (res.statusCode === 200 && res.data.code === 1) {
								uni.showToast({
									title: "驳回成功",
									icon: 'success'
								});
								this.closeRejectModal();
								this.loadTasks(); // 刷新任务列表
							} else {
								uni.showToast({
									title: "驳回失败",
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							uni.showToast({
								title: "请求接口失败" + err.message,
								icon: 'none'
							});
						}
					});
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f0f4f9;
		min-height: 100vh;
	}

	.nav-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		background: linear-gradient(to right, #2563eb, #1d4ed8);
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 10px;
		margin-bottom: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.task-list {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.task-item {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
		border-radius: 8px;
		margin-bottom: 12px;
		transition: all 0.3s;
		background-color: #ffffff;
	}

	.task-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	}

	.no-tasks {
		color: #6b7280;
		text-align: center;
		padding: 20px 0;
		font-size: 16px;
	}

	.nav-title {
		text-align: center;
		width: 100%;
	}

	.task-info {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-row {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #374151;
	}

	.label {
		font-weight: 600;
		color: #2563eb;
		margin-right: 6px;
	}

	/* 紧急程度背景色 */
	.info-row:nth-child(6) text:last-child {
		padding: 2px 8px;
		border-radius: 6px;
		color: white;
		font-weight: 500;
		background-color: #60a5fa;
		/* 默认中 */
	}

	/* 动态紧急程度颜色 */
	.info-row:nth-child(6) text:last-child:before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: currentColor;
		margin-right: 6px;
	}

	/* 超时预警背景色 */
	.info-row:nth-child(7) text:last-child {
		padding: 2px 8px;
		border-radius: 6px;
		color: white;
		font-weight: 500;
		background-color: #34d399;
		/* 默认否 */
	}

	/* 动态超时预警颜色 */
	.info-row:nth-child(7) text:last-child:before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: currentColor;
		margin-right: 6px;
	}

	.task-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 14px;
	}

	.blue-button {
		background: linear-gradient(to right, #2563eb, #1d4ed8);
		color: white;
		border: none;
		padding: 8px 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		font-size: 14px;
		transition: all 0.3s;
	}

	.blue-button:hover {
		opacity: 0.9;
		transform: translateY(-1px);
	}

	/* 弹窗样式 */
	.approve-modal,
	.reject-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		width: 90%;
		max-width: 400px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
	}

	.modal-close {
		font-size: 16px;
		color: #6b7280;
		cursor: pointer;
	}

	.modal-body {
		margin-bottom: 16px;
	}

	.form-item {
		margin-bottom: 12px;
	}

	.form-label {
		font-weight: 600;
		color: #374151;
		margin-bottom: 6px;
		display: block;
	}

	.form-input {
		width: 100%;
		border: 1px solid #d1d5db;
		padding: 6px 10px;
		border-radius: 8px;
		outline: none;
	}

	.radio-label {
		margin-right: 12px;
		color: #374151;
	}

	.radio {
		margin-right: 6px;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}


	.reject-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.timeout-tag {
		padding: 2px 6px;
		border-radius: 6px;
		color: #fff;
		font-size: 14px;
	}

	.timeout-yes {
		background-color: #f5222d;
		/* 超时：红色 */
	}

	.timeout-no {
		background-color: #52c41a;
		/* 未超时：绿色 */
	}
</style>